


import React , {useState,useRef }  from 'react' 
const Hooks2 = () => {
    const [list,setList] = useState(["Vue","Node","React","小程序"])
    const changeList = item =>{
        list.push(item)
        setList([...list])
        // setList(list)
    }
    const deleteListOne = (l,i)=>{
        list.splice(i,1);
        setList([...list ])
    }
    const updateListOne = (l,i)=>{
        list.splice(i,1,l)
        setList([...list])
    }
    return (
        <div>
            <h2>Hooks 实现简易的留言板 </h2>
            <hr/>
            <ShowMsgCom list={list}  deleteListOne = {deleteListOne} updateListOne={updateListOne} />
            <hr/>
            <PostMsgCom changeList={changeList}/>
        </div>
    );
}

const ShowMsgCom = ({list, deleteListOne , updateListOne })=> {
    const updateOne = (l,i)=>{
        let value = window.prompt(i,l)
        if(value && value != l){
            updateListOne(value,i)
        }
    }
    return (
        <div>
            <h2>展示留言组件 </h2>
            <div>
                {
                    list.map((l,i)=>{
                        return (
                            <div key={i}>
                                <p>序号: {i+1}</p>
                                <p>标题: {l}</p>
                                <p>
                                    <button onClick={()=>deleteListOne(l,i)}>删除</button>  
                                    <button onClick={()=>updateOne(l,i)}>修改</button>
                                </p>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    )
}

const PostMsgCom = ({changeList})=>{
    const title = useRef()
    const change = ()=>{
        changeList(title.current.value)
        title.current.value = ""
    }
    return (
        <div>
            <h2>发送添加留言组件 </h2>
            <div>
                <p>
                    <input type="text" ref={title} placeholder="请输入"  />
                </p>
                <p>
                    <button onClick={change}>点击提交</button>
                </p>
            </div>
        </div>
    )
}
export default Hooks2;
